<template>

    <el-dialog :title="title"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="open" custom-class="form-dialog " append-to-body>
      <div class="info-container">
        <el-row>
            <el-col class="flex-col" :span="columnSpan">
              
              <label class="column-label">名称：</label>
              
	            <div class="column-value">{{info.name}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="flex-col" :span="columnSpan">
              
              <label class="column-label">地址：</label>
              
	            <div class="column-value">{{info.address}}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="flex-col" :span="columnSpan">
              
              <label class="column-label">联系电话：</label>
              
	            <div class="column-value">{{info.tel}}</div>
            </el-col>
        </el-row>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-hasPermi="['knowledge:publisher:edit']" @click="modify">编 辑</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>

</template>

<script>
	import * as publisherService from "@/api/service/knowledge/PublisherService";
	import { Loading } from 'element-ui';
	
	export default {
  name: "PublisherInfo",
  props:{
    item:{
        type: Object
    }
  },
  data() {
    return {
      // 栅栏 24
      columnSpan: 24,
      // 表单初始化完成
      formInitialed: false,
      // 页面/弹窗标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 详情信息
      info: {}

    };
  },
  created() {
    this.open = true;
  },
  mounted(){
    // 获取 form并加入loading，避免网络差造成假死现象
    this.$nextTick(() => {
      if(this.$refs.form){
        if(!this.dataInitialed){
          this.loadingInstance = Loading.service({
            target: this.$refs.form.$el,
            fullscreen: false
          });
        }
      }
    })

   
    this.title = "出版社详情";
    this.handleInfo(this.item.id);
   
  },
  computed:{
    dataInitialed(){
      return this.formInitialed;
    }
  },
  watch:{
      open(newVal){
        if(!newVal){
          this.$emit('update:item', null);
        }
      },
      dataInitialed(val){
        if(val && this.loadingInstance){
          this.loadingInstance.close();
        }
      }
  },
  methods: {
	  // 编辑按钮
	  modify(){
		  this.cancel();
		  this.$emit('modify', this.item);
	  },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.info = {
      };
    },

    /** 详情按钮操作 */
    handleInfo(id) {
      this.reset();
      publisherService.get(id).then(resp => {
	      this.info = resp;
      }).finally(()=>{
        this.formInitialed = true;
      });
    }
 
  }
};
</script>
